<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="title_topbox">
			<view class="nav-back" @click="goBack">
				<uni-icons type="left" size="24" color="#333"></uni-icons>
			</view>
			<view class="search-container">
				<view class="search-box">
					<uni-icons type="search" size="16" color="#999"></uni-icons>
					<input v-model="searchKeyword" placeholder="输入商品名称" @confirm="searchGoods" class="search-input" />
				</view>
				<button class="search-btn" @click="searchGoods">搜索</button>
			</view>
		</view>

		<!-- 切换栏 -->
		<view class="tabbarbxo">
			<view class="tabbar">
				<view class="tabbartext" v-for="(tab, index) in tabs" :key="index"
					:class="{ 'active': subCurrent === index }" @click="subChecked(index)">
					{{ tab }}
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<uni-load-more v-if="loading" status="loading" :contentText="{ contentdown: '正在加载...' }" />
			<view v-else-if="sortedGoods.length === 0" class="empty-tips">
				<uni-icons type="info" size="24" color="#999"></uni-icons>
				<text>暂无相关商品</text>
			</view>
			<scroll-view scroll-y v-else class="goods-container">
				<view v-for="(goods, index) in sortedGoods" :key="index" class="goods-item"
					@click="navigateToDetail(goods.goodsId)">
					<image class="goods-image" :src="`http://localhost:8080${goods.goodsImage1}`" mode="aspectFill">
					</image>
					<view class="goods-right-info">
						<view class="goods-title">{{ goods.goodsName }}</view>
						<view class="price-stock">
							<view class="current-price">¥{{ goods.goodsPrice }}</view>
							<view class="stock">销量{{ goods.stockQuantity }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['综合', '销量', '价格'],
				subCurrent: 0,
				searchKeyword: '', // 输入的商品名称模糊搜索
				GoodsList: [],
				loading: false
			};
		},
		computed: {
			sortedGoods() {
				const filteredGoods = this.GoodsList;
				switch (this.subCurrent) {
					case 1: // 销量排序
						return [...filteredGoods].sort((a, b) => b.stockQuantity - a.stockQuantity);
					case 2: // 价格排序
						return [...filteredGoods].sort((b, a) => b.goodsPrice - a.goodsPrice);
					default: // 默认排序
						return [...filteredGoods].sort((a, b) => a.goodsId - b.goodsId);
				}
			},
		},
		methods: {
			// 搜索商品
			async searchGoods() {
				if (!this.searchKeyword.trim()) {
					uni.showToast({
						title: '请输入商品名称',
						icon: 'none'
					});
					return;
				}

				this.loading = true;
				try {
					const res = await uni.request({
						// 不使用 encodeURIComponent 编码
						url: `http://localhost:8080/goods/goods/list?goodsName=${this.searchKeyword}`,
						method: 'GET',
						header: {
							'Content-Type': 'application/json',
							'Authorization': uni.getStorageSync('token'),
							// 'Authorization': 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjM5NDYyZWI2LWNhNjAtNGEzYS1hNzFkLWI2MjcxN2Q1M2EwYiJ9.QeRjbuuuHvaTlY80v3EUn6war_dArBI2-cvBxoGl7FCGaerm-fGPDHthaeuDQK0UIylCw4-gsPuzYZGhh158Dw'
						}
					});

					// 正确处理 uni.request 返回值
					if (res.statusCode === 200) {
						this.GoodsList = res.data.rows;
						if (this.GoodsList.length === 0) {
							uni.showToast({
								title: '未找到相关商品',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: '搜索失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('搜索失败:', error);
					uni.showToast({
						title: '搜索失败',
						icon: 'none'
					});
				} finally {
					this.loading = false;
				}
			},
			subChecked(index) {
				this.subCurrent = index;
			},
			navigateToDetail(goodsId) {
				uni.navigateTo({
					url: `/pages/shop-details/shop-details?goodsId=${goodsId}`
				});
			},
			goBack() {
				uni.navigateBack();
			}
		},
		onLoad() {
			this.searchGoods();
		}
	};
</script>

<style>
	.goods-list {
		padding: 20rpx;
		height: 80vh;
	}

	.container {
		background-color: #FFF8F0;
		min-height: 100vh;
	}

	.title_topbox {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.search-container {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.search-box {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f5f5f5;
		height: 70rpx;
		border-radius: 35rpx;
		padding: 0 25rpx;
		margin-right: 20rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		margin-left: 15rpx;
		height: 100%;
	}

	.search-btn {
		/* background: #f1e054;
		color: #333;
		font-size: 28rpx;
		padding: 0 35rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx; */

		background: #F7B62D;
		/* color: #333; */
		font-size: 28rpx;
		padding: 0 40rpx;
		/* height: 70rpx; */
		/* line-height: 70rpx; */
		border-radius: 35rpx;
	}

	.tabs-container {
		display: flex;
		background: #fff;
		padding: 30rpx 0;
		margin-top: 20rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		color: #666;
		padding: 20rpx 0;
		position: relative;
	}

	.tab-item.active {
		color: #F7B62D;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;
		height: 6rpx;
		background: #F7B62D;
		border-radius: 3rpx;
	}

	.goods-container {
		/* display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: white;
		border-radius: 10px;
		height: 75vh; */

		display: flex;
		flex-direction: column;
		background: white;
		border-radius: 10px;
		width: 96%;
		margin: 0 auto;
		padding: 10px;
		height: 75vh;
	}

	.goods-item {
		/* display: flex;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		padding: 15rpx; */

		/* display: flex;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		padding: 10px; */

		display: flex;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
		padding: 10px;
	}

	.goods-image {
		width: 120rpx;
		height: 120rpx;
		background: #f5f5f5;
		margin-right: 15rpx;
	}

	.goods-right-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-title {
		/* 	font-size: 28rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden; */

		font-size: 28rpx;
		color: #333;
		overflow: hidden;
		margin-bottom: 5px;
	}

	.price-stock {
		/* 		display: flex;
		align-items: center;
		gap: 10rpx; */
	}

	.current-price {
		/* color: #e4393c;
		font-size: 32rpx;
		font-weight: bold; */

		color: #e4393c;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 1px;
	}

	.stock {
		color: #999;
		font-size: 24rpx;
	}

	.empty-tips {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loading-text {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	/* 切换栏样式 */
	.tabbarbxo {
		padding: 4% 3%;
		background: #ffffff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.tabbar {
		display: flex;
		gap: 7%;
		align-items: center;
	}

	.tabbartext {
		font-size: 15px;
		color: #666;
	}

	/* tab被选样式 */
	.active {
		position: relative;
		color: #F7B62D;
		font-weight: bold;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 15px;
		height: 3px;
		background-color: #F7B62D;
		left: 0;
		right: 0;
		margin: 0 auto;
		top: 25px;
		border-radius: 5px;
	}
</style>
